<template>
  <div class="page-cookbook-info">
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="info-banner">
          <img :src="`${OSS_HOST}img/${info.id}.jpg?x-oss-process=image/resize,m_fill,h_300,w_120`" alt="">
      </div>

      <div class="info-title" v-text="info.title"></div>
      <div class="item-level">
			星级评分：<Icon type="ios-star"
				v-for="i in info.level"
				size="16"
				color="#ff7800"
				:key="i"/>
		</div>
		<div class="info-views">
			浏览量：{{info.id * 0.1 + 1.9}}w <Icon type="ios-eye" size="22"/>

			<div class="item-like">
				<Icon size="18"
					@click.e="onLike"
					:type="`ios-heart${info.id % 3 == 0 ? '' : '-outline'}`"
					:color="info.id % 3 == 0 ? 'red' : ''"/>
			</div>
		</div>

        <div class="info-content" v-html="info.html"></div>
  </div>
</template>

<script>
import { OSS_HOST } from '~config'
import axios from 'axios'
export default {
	data() {
		return {
            spinShow: true,
            info: {},
            OSS_HOST
		}
	},
	asyncData ({ params }) {
		return axios.get(`${OSS_HOST}data/list.json`)
		.then((res) => {
            const info = res.data.filter(item => {
                return params.id == item.id
            })[0] || {}
		  	return { info, spinShow: false }
		})
	},
	head() {
        return {
            title: this.info.title
        }
    },

    mounted () {
        // this.$store.commit('base/CHANGE_LOADING_STATE', false)
    },

	methods: {
		onLike() {
			this.$Message.info('点击收藏按钮~');
		}
	}
}
</script>

<style lang="less">
	.page-cookbook-info{
        background: #fff;
        min-height: 100%;
        .info-banner{
            max-height: 250px;
            min-height: 200px;
            overflow: hidden;
            background: #eee;
            img{
                display: block;
                width: 100%;
            }
        }

        .info-title{
            line-height: 30px;
            padding: 10px;
            font-size: 18px;
            &:before{
                display: inline-block;
                content: '菜名';
                padding: 0 5px;
                background: red;
                color: #fff;
                font-weight: blod;
                border-radius: 3px;
                margin-right: 5px;
            }
        }

        .item-level{
            padding: 0 10px;
			font-size: 14px;
			line-height: 25px;
			i{
				vertical-align: middle;
			}
		}
		.info-views{
            padding: 0 10px 10px;
			font-size: 16px;
			position: relative;
			.item-like{
				float: right;
			}
        }
        .info-content{
            padding: 0 10px 20px;
            background: #f5f5f5;
            font-size: 12px;
            p{
                padding-top: 10px;
                position: relative;
                &.title{
                    font-size: 18px;
                    padding-left: 10px;
                    &:before{
                        position: absolute;
                        display: inline-block;
                        left: 0;
                        content: ' ';
                        width: 4px;
                        height: 22px;
                        top: 12px;
                        background: red;
                        color: #fff;
                        font-weight: blod;
                        border-radius: 3px;
                        margin-right: 5px;
                    }
                }
            }
        }
    }
</style>